<template>
    <view class="content">
        <view class="bg"></view>
        
        <view class="box u-p-b-20">
            <view class="work-title">运输线路</view>
            <view class="item">
                <view class="grey">选择线路</view>
                <view class="item-right" @click="show_1 = true">
                    <input type="text" v-model="lineData.name" placeholder="请选择运输线路" class="inp" disabled>
                    <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
                </view>
            </view>
            <view class="item" v-if="lineData.origin">
                <view class="grey">始发地</view>
                <view class="item-right">{{ lineData.origin }}</view>
            </view>
            <view class="item" v-if="lineData.destination">
                <view class="grey">目的地</view>
                <view class="item-right">{{ lineData.destination }}</view>
            </view>
            <view class="item" v-if="lineData.loading_site">
                <view class="grey">装车地点</view>
                <view class="item-right">{{ lineData.loading_site }}</view>
            </view>
            <view class="item u-p-b-10" v-if="lineData.start_time">
                <view class="grey">发车日期</view>
                <view class="item-right" @click="show_2 = true">
                    <input type="text" v-model="date" placeholder="请选择" class="inp" disabled>
                    <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
                </view>
            </view>
			<view class="item u-p-b-10">
			    <view class="grey">发车时间</view>
			    <view class="item-right" @click="show_3 = true">
			        <input type="text" v-model="time" placeholder="请选择" class="inp" disabled>
			        <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
			    </view>
			</view>
            <view class="price2" v-if="lineData.start_time">
                <view class="tip2">温馨提示: {{ lineData.start_time }} 以后不发车</view>
            </view>
        </view>
        
        <view class="box">
            <view class="item">
                <view class="grey">我是</view>
                <view class="item-right">
                    <view class="role-btn" :class="{roleActive : role == 1}" @click="role = 1">发货方</view>
                    <view class="role-btn" :class="{roleActive : role == 2}" @click="role = 2">收货方</view>
                </view>
            </view>
        </view>
        
        <view class="box u-p-b-10">
            <view class="box-top">
                <view class="s-icon">收</view>
                <view class="u-flex" @click="toPage(`/pages/address/take-address`)">
                    <image src="../../static/icon/add.png" class="add-icon"></image>
                    <view>收货方地址</view>
                </view>
            </view>
			<view class="item" v-if="lineData.address">
			    <view class="grey">收货地址</view>
			    <view class="item-right">{{ lineData.address }}</view>
			</view>
			<!-- <template v-if="takeAdd.address"> -->
				<view class="item u-p-b-10">
				    <view class="grey">经营位置</view>
				    <view class="item-right" @click="toPage(`/pages/address/take-address`)">
				        <input type="text" v-model="takeAdd.address" placeholder="请选择" class="inp" disabled>
				        <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
				    </view>
				</view>
				<view class="item">
				    <view class="grey">联系人</view>
					<view class="item-right">
					    <input type="text" v-model="takeAdd.contacts" placeholder="请输入联系人" class="inp">
					</view>
				</view>
				<view class="item">
				    <view class="grey">联系方式</view>
				    <view class="item-right">
				        <input type="number" v-model="takeAdd.phone" placeholder="请输入联系方式" class="inp">
				    </view>
				</view>
			<!-- </template> -->
        </view>
        
        <view class="box">
            <view class="box-top">
                <view class="f-icon">发</view>
                <view class="u-flex" @click="toPage(`/pages/address/send-address`)">
                    <image src="../../static/icon/add.png" class="add-icon"></image>
                    <view>发货方地址</view>
                </view>
            </view>
			<template v-if="sendAdd.name">
				<view class="item u-p-b-10">
				    <view class="grey">发货方</view>
				    <view class="item-right" @click="toPage(`/pages/address/send-address`)">
				        <input type="text" v-model="sendAdd.name" placeholder="请选择" class="inp" disabled>
				        <u-icon name="arrow-right" color="#979797" size="28" class="u-m-l-5"></u-icon>
				    </view>
				</view>
				<view class="item">
				    <view class="grey">联系人</view>
				    <view class="item-right">
				        <input type="text" v-model="sendAdd.contacts" placeholder="请输入联系人" class="inp">
				    </view>
				</view>
				<view class="item">
				    <view class="grey">联系方式</view>
				    <view class="item-right">
				        <input type="number" v-model="sendAdd.phone" placeholder="请输入联系方式" class="inp">
				    </view>
				</view>
			</template>
            <view class="item-col">
                <view class="grey">地址备注</view>
                <textarea maxlength="200" v-model="remark" :auto-height="true" placeholder="请输入地址备注信息" class="t-inp"></textarea>
            </view>
        </view>
        
        <view class="btn" @click="$noMultipleClicks(next)">下一步</view>
		
		<!-- 运输线路 -->
		<u-select v-model="show_1" mode="single-column" :list="select.line" label-name="name" value-name="id" @confirm="confirm($event, 1)"></u-select>
		<!-- 发车日期 -->
		<u-picker v-model="show_2" mode="time" @confirm="confirm($event, 2)"></u-picker>
		<!-- 发车时间 -->
		<template v-if="show_3">
			<u-select v-model="show_3" mode="single-column" :list="timeList" @confirm="confirm($event, 3)"></u-select>
		</template>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				noClick: true,//连点
                role: 1,//1发货方 2收货方
				show_1: false,//运输线路
				show_2: false,//发车日期
				show_3: false,//发车时间
				select: {}, //下拉选项
				lineData: {},//运输线路
				date: '',//发车日期
				timestamp: '',//发车日期时间戳
				timeList: [],//发车时间
				time: '',//发车时间
				takeAdd: {},//收获方地址
				sendAdd: {},//发获地址
				remark: '',//地址备注
				isChooseAdd: 0,//1是选择地址，不请求订单详情接口
				order_id_again: '',
				isAgain: '',//1是再来一单
            };
        },
        onLoad(option) {
			// 从我的订单进入
			if (option.order_id_again) {
				this.order_id_again = option.order_id_again
			}
			if (option.isAgain) {
				this.isAgain = option.isAgain
			}
			
			this.getSelect()
			
			// 接收收货方地址
			uni.$on('CHOOSE_TAKE_ADD_LD', data => {
				console.log(data)
				this.takeAdd = data
			})
			
			// 接收发货方地址
			uni.$on('CHOOSE_SEND_ADD_LD', data => {
				console.log(data)
				this.sendAdd = data
			})
        },
		onShow() {
			
		},
        methods: {
			// 选择地址
			toPage(url) {
				this.isChooseAdd = 1
				this.$gTo(url + '?from=ld')
			},
			
			// line 线路 shipper默认发货方 recipient 默认收货方
			getSelect() {
			    this.$ajax('select_line', {
			        user_token: this.$getSync('userToken'),
			    }).then(ret => {
			        if (ret.success == 1000) {
			            this.select = ret.detail
						if (!this.order_id_again) {
							if (ret.detail&&ret.detail.recipient&&ret.detail.recipient[0]) {
								this.takeAdd = ret.detail.recipient[0]
							}
							if (ret.detail&&ret.detail.shipper&&ret.detail.shipper[0]) {
								this.sendAdd = ret.detail.shipper[0]
							}
						} else {
							this.getData()
						}
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
			
			// 获取第一步订单详情
			getData() {
				let url = '', param = {}
				if (this.isAgain) {
					// 再来一单
					url = 'another_order'
					param = {
						user_token: this.$getSync('userToken'),
						order_id: this.order_id_again,//订单id
					}
				} else {
					// 订单详情
					url = 'orders_detail'
					param = {
						user_token: this.$getSync('userToken'),
						order_id: this.order_id,//订单id
					}
				}
				this.$ajax(url, param).then(ret => {
				    if (ret.success == 1000) {
				        let data = ret.detail
						
						this.lineData.id = data.line_id
						this.lineData.name = data.line
						this.lineData.origin = data.origin
						this.lineData.destination = data.destination
						this.lineData.loading_site = data.loading_site
						
						if (!this.order_id_again) {
							this.date = data.start_date
						}
						this.time = data.start_time
						
						this.lineData.address = data.address //线路选择后返回的
						
						this.select.line.forEach(cur => {
							if (cur.id == this.lineData.id) {
								this.lineData.loading_time = cur.loading_time
								this.lineData.start_time = cur.start_time
							}
						})
						
						// 生成发车时间列表
						let a = this.lineData.loading_time.split(":")[0]
						let aa
						if (a < 10) {
							aa = a.slice(1)
						} else {
							aa = a
						}
						let b = this.lineData.start_time.split(":")[0]
						let c = Number(b) + 1
						for (let i = aa; i < c; i++) {
							let lab = i < 10 ? '0' + i : i
							this.timeList.push({
								value: i,
								label: lab + ':00'
							})
						}
						
						this.role = data.user_type
						
						this.takeAdd.id = data.recipient_id
						this.takeAdd.address = data.position
						this.takeAdd.contacts = data.recipient_contact
						this.takeAdd.phone = data.recipient_phone
						
						this.sendAdd.id = data.shipper_id
						this.sendAdd.name = data.shipper
						this.sendAdd.contacts = data.shipper_contact
						this.sendAdd.phone = data.shipper_phone
						
						this.remark = data.remark
				    } else {
				        this.$toast(ret.msg);
				    }
				});
			},
			
            // 下一步
            next() {
				if (!this.lineData.id) {
					this.$toast('请选择运输线路')
					return
				}
				if (!this.date) {
					this.$toast('请选择发车日期')
					return
				}
				if (!this.time) {
					this.$toast('请选择发车时间')
					return
				}
				let start_time = this.date + ' ' + this.time
				
				if (!this.takeAdd.id) {
					this.$toast('请选择收货方经营位置')
					return
				}
				if (!this.takeAdd.contacts) {
					this.$toast('请输入收货方联系人')
					return
				}
				if (!this.takeAdd.phone) {
					this.$toast('请输入收货方联系方式')
					return
				}
				// if(!this.$checkPhone(this.takeAdd.phone)){
				// 	this.$toast('请输入正确的收货方联系方式')
				// 	return
				// }
				
				if (!this.sendAdd.id) {
					this.$toast('请选择发货方地址')
					return
				}
				if (!this.sendAdd.contacts) {
					this.$toast('请输入发货方联系人')
					return
				}
				if (!this.sendAdd.phone) {
					this.$toast('请输入发货方联系方式')
					return
				}
				// if(!this.$checkPhone(this.sendAdd.phone)){
				// 	this.$toast('请输入正确的发货方联系方式')
				// 	return
				// }
				
				this.$ajax('insert_order_first', {
				    user_token: this.$getSync('userToken'),
					order_type: 1,//1零担 2包车
					line_id: this.lineData.id,//线路id
					start_time: start_time,//发车时间
					user_type: this.role,//1发货方 2收货方
					recipient_id: this.takeAdd.id,//收货方id
					recipient_contact: this.takeAdd.contacts,//收货方联系人
					recipient_phone: this.takeAdd.sphone,//收货方联系方式
					shipper_id: this.sendAdd.id,//发货方id
					shipper_contact: this.sendAdd.contacts,//发货方联系人
					shipper_phone: this.sendAdd.phone,//发货方联系方式
					image_id: '',//图片id
					remark: this.remark,//备注
					vehicle_id: '',//车辆类型id 包车
					length_id: '',//车长id 包车
					order_id: this.order_id,//订单id
				}).then(ret => {
				    if (ret.success == 1000) {
						this.order_id = ret.detail.order_id
						this.isChooseAdd = 0
						this.$gTo(`/pages/ld-send/ld-send?order_id=${ret.detail.order_id}&isAgain=${this.isAgain}&order_id_again=${this.order_id_again}`)
				    } else {
				        this.$toast(ret.msg);
				    }
				});
            },
			
			confirm(e, num) {
				console.log(e);
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = currentDate.getMonth() + 1; // 月份从0开始，需要加1
				const day = currentDate.getDate();
				const now = new Date(year + '-' + (month > 10 ? month : '0' + month) + '-' + (day > 10 ? day : '0' + day))//当前日期
				
				if (num == 1) {
					// 选择运输线路
					this.select.line.forEach(cur => {
						if (cur.id == e[0].value) {
							this.lineData = cur
							this.time = cur.start_time
						}
					})
					
					// 生成发车时间列表
					let a = this.lineData.loading_time.split(":")[0]
					let aa
					if (a < 10) {
						aa = a.slice(1)
					} else {
						aa = a
					}
					let b = this.lineData.start_time.split(":")[0]
					let c = Number(b) + 1
					for (let i = aa; i < c; i++) {
						let lab = i < 10 ? '0' + i : i
						this.timeList.push({
							value: i,
							label: lab + ':00'
						})
					}
					console.log(a,aa,b,c,this.timeList)
				} else if (num == 2) {
					// 选择发车日期
					let date = new Date(e.year + '-' + e.month + '-' + e.day)//选择日期
					
					if (date < now) {
						this.$toast('不能选择过去的日期')
						return
					} else if (date > now) {
						this.timestamp = e.timestamp * 1000
						this.date = e.year + '-' + e.month + '-' + e.day
					} else {
						this.timestamp = e.timestamp * 1000
						this.date = e.year + '-' + e.month + '-' + e.day
						this.time = ''
					}
					
				} else if (num == 3) {
					// 选择发车时间
					let date = new Date(this.date).getTime()//选择日期
					let nowstamp = now.getTime()
					
					if (date == nowstamp) {
						// 如果是当天，判断发车时间 不能 小于当前时间
						let currentTime = new Date();
						let nowh = currentTime.getHours();//当前 小时
						let hours = Number(e[0].value)//选择的小时
						console.log(hours,nowh)
						if (nowh >= hours) {
							this.$toast('不能选择过去的时间')
							return
						} else {
							this.time = e[0].label
						}
					} else {
						this.time = e[0].label
					}
				}
			},
			
        }
    };
</script>

<style lang="scss">
    
    
    page{
        background-color: #f2f4fa;
    }
    .content {
    	padding: 30rpx 20rpx;
    }
    .bg {
    	width: 100%;
    	height: 500rpx;
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: -1;
    	background: linear-gradient(to bottom, #cfe4fc, #e5eefb,#f2f4fa);
    }
    
    .box{
        padding: 0 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 30rpx;
    }
    
    .item{
        padding: 30rpx 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .work-title{
        font-size: 32rpx;
        font-weight: bold;
        padding-top: 30rpx;
    }
    .item-right{
        flex: 1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-left: 20rpx;
        text-align: right;
    }
    .inp{
        flex: 1;
        text-align: right;
    }
    .grey{
        color: #656565;
    }
    .price{
        padding: 30rpx 0 20rpx;
        border-top: 2rpx solid #f4f4f4;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        font-size: 28rpx;
    }
    .price-num{
        font-size: 40rpx;
        font-weight: bold;
        padding-left: 10rpx;
        padding-right: 5rpx;
    }
    .tip{
        font-size: 22rpx;
        color: #fe6a00;
        line-height: 1;
        padding: 5rpx 13rpx;
        background-color: #fdf6f0;
        border: 2rpx solid #fe6a00;
        margin-top: 8rpx;
    }
    
    .btns{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 40rpx;
    }
    .add-02{
        width: 152rpx;
        height: 56rpx;
    }
    .del-02{
        width: 57rpx;
        height: 57rpx;
        margin-left: 25rpx;
    }
    
    .pt-box{
        padding: 35rpx 30rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 16rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .icon-02{
        width: 55rpx;
        height: 55rpx;
        margin-right: 15rpx;
    }
    .pt-t1{
        font-size: 32rpx;
        font-weight: bold;
        padding-right: 20rpx;
    }
    .pt-t2{
        font-size: 22rpx;
        color: #929292;
    }
    .pt-t3{
        font-size: 22rpx;
        color: #ff5f2b;
    }
    
    .price2{
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }
    .tip2{
        font-size: 22rpx;
        color: #fe6a00;
        line-height: 1;
        padding: 5rpx 13rpx;
        background-color: #fdf6f0;
        border: 2rpx solid #fe6a00;
    }
    
    .item-col{
        padding: 30rpx 0;
    }
    .option{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding-top: 10rpx;
    }
    .o-i{
        background-color: #f5f5f5;
        border-radius: 20rpx;
        padding: 20rpx 45rpx;
        margin-top: 13rpx;
        margin-right: 13rpx;
    }
    .active{
        color: #0075cf;
        background-color: #f1f8ff;
        border: 2rpx solid #0075cf;
        box-sizing: border-box;
        position: relative;
    }
    .choose-03{
        width: 33rpx;
        height: 26rpx;
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .t-inp{
        background-color: #f5f6fa;
        width: 100%;
        min-height: 180rpx;
        height: auto;
        padding: 20rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }
    .btn{
        font-size: 34rpx;
        color: #fff;
        text-align: center;
        padding: 25rpx;
        background-color: #00457f;
        border-radius: 50rpx;
        margin-top: 50rpx;
    }
    
    
    .role-btn{
        padding: 15rpx 40rpx;
        background-color: #f2f4fa;
        border-radius: 50rpx;
        margin-left: 20rpx;
    }
    .roleActive{
        color: #fff;
        background-color: #0075cf;
    }
    .box-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 30rpx;
        color: #0075cf;
    }
    .s-icon{
        width: 40rpx;
        height: 40rpx;
        background-color: #016efe;
        border-radius: 10rpx;
        font-size: 23rpx;
        color: #fff;
        text-align: center;
        line-height: 40rpx;
    }
    .f-icon{
        width: 40rpx;
        height: 40rpx;
        background-color: #25c49a;
        border-radius: 10rpx;
        font-size: 23rpx;
        color: #fff;
        text-align: center;
        line-height: 40rpx;
    }
    .add-icon{
        width: 23rpx;
        height: 26rpx;
        margin-right: 10rpx;
    }

</style>
